｜Day 11｜從 HTML + CSS 開始

第 11 屆 iThome 鐵人賽

DAY 11

自我挑戰組

用敏捷管理我跟 HTML＆CSS 的 30 天親密接觸系列第 11 篇

11th鐵人賽

Keddie

2019-09-24 14:14:23

1112 瀏覽

分享至

何謂 CSS 呢？從維基百科偷一點點介紹給大家看看

層疊樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。目前最新版本是CSS2.1，為W3C的推薦標準。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發中。

說白一點，就是替你的 HTML 的這張素顏的臉化點妝，加些變化。

❶ 標籤介紹

使用 CSS 前先跟大家說明<div> </div>標籤，DIV 可以解釋為區塊，用 DIV 標籤包起來的東西，瀏覽器會視為一個區塊，你可以將你的畫面分成很多區塊，並用 div 包起來，接著對各個區塊做 CSS 排版。

❷ CSS 小整理

用條列方式整理出幾個重點給大家

不可以單獨使用，需與 HTML 共同協作。
<head> </head>之間用<style> </style>來寫 CSS，可對 HTML 做樣式的設定。
- 會使用 CSS 選取器（CSS Selector）來選取想做樣式的區塊。
```
    <head>
    <meta charset="UTF-8">
    <title>no.11</title>
     <style>
      h1{
        color: red;
       }
    </style>
   </head>
```
  以上語法在瀏覽器的畫面如下圖
除了寫在 head 裡，也可以 寫在另外檔案，再用標籤嵌入 css 檔案
```
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
```
- 其中「rel="stylesheet" type="text/css"」所代表的意思，就是告訴瀏覽器要導入一個在外部的 css 檔案，透過 href 導入名為 style.css 的樣式檔案。